<template>
	<div class="table-main" ref="tableBody">
		<el-scrollbar class="table-body" @scroll="handleScroll">
			<div class="table-header" ref="tableHeader">
				<div class="table-cell" v-for="(title, index) in tableTitles" :key="index">{{ title }}
				</div>
			</div>
			<div class="table-row" :style="{ height: height + 'px' }" v-for="(item, rowIndex) in tableData"
				:key="rowIndex" v-if="tableData.length > 0">
				<div class="table-cell" v-for="(cell, cellIndex) in item" :key="cellIndex">{{ cell }}
				</div>
			</div>
			<div class="empty" :style="{ height: height + 'px' }" v-else>暂无数据</div>
		</el-scrollbar>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watchEffect, onBeforeUnmount } from 'vue';
const tableHeader = ref<null | HTMLDivElement>(null);
const tableBody = ref<null | HTMLDivElement>(null);
const height = ref(0)
const tableTitles = ref(['地块编号', '地块名称', '土地面积（平方米）', '土地用途', '容积率', '建筑密度', '绿地率'])
const tableData = ref([

]
)

const getHeight = () => {
	if (tableHeader.value && tableBody.value) {
		height.value = tableBody.value.clientHeight - tableHeader.value.clientHeight - 1
	}
}
onMounted(() => {
	getHeight()
	window.addEventListener('resize', function () {
		getHeight()
	});
})
onBeforeUnmount(() => {
	window.removeEventListener('resize', function () {
	});
});
</script>

<style lang="less" scoped>
.table-main {
	margin: 15px 25px;
	margin-top: 17px;
	font-size: 12px;
	border: 1px solid #80FFFF;
	height: 100%;
}

.table-header {
	display: flex;
	color: #80FFFF;
	border-bottom: 1px solid #80FFFF;
}

.table-row {
	display: flex;
	border-bottom: 1px solid #80FFFF;
}

.table-cell {
	flex: 1;
	padding: 3px;
	border-right: 1px solid #80FFFF;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.table-cell:last-child {
	border-right: 0px solid #80FFFF;
}

.table-row:last-child {
	border-bottom: 0px solid #80FFFF;
}

.table-header .table-cell:nth-child(3) {
	flex: 1.7;
}

.table-body .table-cell:nth-child(3) {
	flex: 1.7;
}

.table-header .table-cell:nth-child(1) {
	flex: 0.8;
}

.table-body .table-cell:nth-child(1) {
	flex: 0.8;
}

.table-header .table-cell:nth-child(2) {
	flex: 1.2;
}

.table-body .table-cell:nth-child(2) {
	flex: 1.2;
}

.table-body {
	// height: 295px;
	box-sizing: border-box;
}

/deep/ .el-scrollbar__view {
	height: 100%;
}

.empty {
	color: #80FFFF;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
</style>